<template style="height: auto;">
	<view>
		<view class="changeimg">
			<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<image :src="formData.headimgurl" class="imgup" mode="widthFix"></image>
			</button>
		</view>
		<view class="username">
			<view class="username-l">昵称：</view>
			<input class="input" type="nickname" placeholder="请输入昵称" maxlength="6" placeholder-style="color: #979797"
				v-model="formData.realname"  @blur="onNickName" />
		</view>
		<view class="username">
			<view class="username-l">
				ID
			</view>
			<view class="input">
				{{userInfo.id.toString().padEnd(6, '0')}}
			</view>
		</view>
		<view class="username">
			<view class="username-l">邮箱号：</view>
			<input class="input"  placeholder="请输入邮箱号" maxlength="20" placeholder-style="color: #979797"
				v-model="formData.email"  />
		</view>
		<view class="username">
			<view class="username-l">身份证号：</view>
			<input class="input"  placeholder="请输入身份证号" maxlength="18" placeholder-style="color: #979797"
				v-model="formData.IDNumber"  />
		</view>
		<view class="username">
			<view class="username-l">手机号：</view>
			<input class="input"  placeholder="请输入手机号" maxlength="11" placeholder-style="color: #979797"
				v-model="formData.phone"  />
		</view>
		<view class="username1">
			<view class="username-l">简介：</view>
			<textarea class="textarea"  placeholder="请输入简介" maxlength="100" placeholder-style="color: #979797"
				v-model="formData.description"  />
		</view>
		<view class="re-btn btn-class-w-h" @tap="instantcharge">保存</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				imgUrl: this.$apiFun.imgUrl,
				host: this.$apiFun.host,
				formData:{
					"realname": "",
					  "phone": "",
					  "email": "",
					  "headimgurl": "",
					  "description": "",
					  "IDNumber": ""
				},
			}
		},
		onLoad(e) {},
		computed: {
			...mapGetters(['userInfo']),
		},
		mounted() {
			this.init()
			this.setForm()
		},
		methods: {
			// 初始化接口
			async init() {
				const res = await this.$apiFun.getApi(this.$api.userDetailApi, {})
				this.$store.dispatch('setUserInfos', res)
			},
			setForm() {
				  this.formData.realname=this.userInfo.realname
				  this.formData.phone=this.userInfo.phone
				  this.formData.email=this.userInfo.email
				  this.formData.headimgurl=this.userInfo.exts.headimgurl
				  this.formData.description=this.userInfo.description
				  this.formData.IDNumber = this.userInfo.IDNumber
			},
			onNickName(e) {
				this.userInfo.nickname = e.detail.value
			},
			onChooseavatar(e) {
				const that = this
				console.log('e.detail.avatarUrl',e.detail.avatarUrl)
				uni.uploadFile({
					url: that.$apiFun.host + that.$api.uploadApi, //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					// sourceType: ['album'],//从相册选择
					name: 'file',
					header: {
						Authorization: uni.getStorageSync('localtokn'),
					},
					success: (uploadFileRes) => {
						uni.showToast({
							icon: 'none',
							title: JSON.parse(uploadFileRes.data).msg,
						})
						if (JSON.parse(uploadFileRes.data).code == 1) {
							that.formData.headimgurl = that.host + JSON.parse(uploadFileRes.data).body
							that.$forceUpdate()
						}
					},
				})
			},
			// 上传图片
			uploadimg() {
				const that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						uni.showLoading({
							title: '正在上传',
						})
						uni.uploadFile({
							url: that.$apiFun.host + that.$api.uploadApi, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							sourceType: ['album'], //从相册选择
							name: 'file',
							header: {
								Authorization: uni.getStorageSync('localtokn'),
							},
							success: (uploadFileRes) => {
								if (JSON.parse(uploadFileRes.data).code ==
									1) {
									if (tempFilePaths.length >= 0) {
										uni.hideLoading()
										arr.push(JSON.parse(uploadFileRes
											.data).body)
										if (tempFilePaths.length - 1 == i) {
											resolve(arr)
										}
									} else {
										resolve(uploadFileRes.data.body)
									}
								} else {
									uni.showToast({
										icon: 'none',
										title: JSON.parse(
												uploadFileRes.data)
											.codeName
									})
								}
							},
						})
					},
				})
			},
			async instantcharge() {
				const that = this
				for(let key in this.formData){
					if(!this.formData[key]){
						uni.showToast({
							title: '请完善表格后在提交',
							icon: 'none',
						})
						return
					}
				}
				
				if (!this.$publicFun.emailRegex.test(this.formData.email)) {
				  uni.showToast({
				    icon: 'none',
				    title: '请输入正确的邮箱号!',
				  })
				  return false
				}
				if (!this.$publicFun.regIdCard(this.formData.IDNumber)) {
				  uni.showToast({
				    icon: 'none',
				    title: '请输入正确的身份证号!',
				  })
				  return false
				}
				if (!this.$publicFun.regPhone.test(this.formData.phone)) {
				  uni.showToast({
				    icon: 'none',
				    title: '请输入正确的手机号!',
				  })
				  return false
				}
				const data = this.$apiFun.putApi(this.$api.updateUserInfoApi, this.formData)
				uni.showToast({
					title: '操作完成',
					icon: 'none',
				})
				await that.init()
				setTimeout(()=>{
					uni.navigateBack()
				},1500)
			},
		},
	}
</script>
<style>
	page {
		height: 100%;
		background: #000000;
		color: white;
	}
</style>
<style>
	page {
		height: 100%;
		background: #000000;
		color: white;
	}
</style>
<style scoped lang="less">
	.changeimg {
		width: 200rpx;
		margin: 0 auto;
		padding: 100rpx 0 60rpx 0;

		// botton 去除边框
		/deep/button::after {
			border: none;
		}

		/deep/button {
			width: 200rpx;
			height: 200rpx;
			border-radius: 100%;
			background: #fff;
			margin: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0;
		}
	}

	.username {
		width: 80%;
		margin: 15rpx auto;
		padding: 0 30rpx;
		background-color: rgba(255, 255, 255, .1);
		display: flex;
		color: rgba(255, 255, 255, 1);
		height: 80rpx;
		border-radius: 6rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		.username-l{
			width:150rpx;
			text-align: left;
		}
	}
	.username1{
		width: 80%;
		margin: 15rpx auto;
		padding: 25rpx 30rpx;
		background-color: rgba(255, 255, 255, .1);
		display: flex;
		color: rgba(255, 255, 255, 1);
		border-radius: 6rpx;
		font-size: 30rpx;
		display: flex;
		align-items: flex-start;
		.username-l{
			width:150rpx;
			text-align: left;
		}
		.textarea{
			flex: 1;
			height: 200rpx;
		}
	}
	.ncts {
		width: 80%;
		margin: 0 auto;
		color: rgba(255, 255, 255, 0.7);
		font-size: 24rpx;
		line-height: 76rpx;
	}

	/* 立即充值按钮 */
	.re-btn {
		width: 90%;
		margin:30rpx 0 0 5%;
		height: 80rpx;
		display: flex;
		border-radius: 6rpx;
		background-color: #f05251;
		font-size: 28rpx;
		color: #ffffff;
		align-items: center;
		justify-content: center;
		position: fixed;
	}

	.imgup {
		width: 200rpx;
		height: 200rpx;
		border-radius: 6rpx;
		// border: 2rpx solid #fff;
		overflow: hidden;
	}
</style>